<template>
  <view class="meta">
    <view>
      <Parents title="年龄范围"></Parents>
      <Parents title="身高范围"></Parents>
      <Parents title="婚况"></Parents>
      <Parents
        :workArea="education"
        :value="educationValue"
        :changePicker="changePickerEducation"
        title="最低学历"
      >
      </Parents>
      <Parents
        :workArea="money"
        :value="moneyValue"
        :changePicker="changePickerMoney"
        title="最低收入"
      ></Parents>
      <Parents
        :workArea="marry"
        :value="marryValue"
        :changePicker="changePickerMarry"
        title="结婚时间"
      ></Parents>
      <Parents title="工作地区"></Parents>
      <Parents title="房子"></Parents>
      <Parents title="其他要求"></Parents>
    </view>
    <view class="station"></view>
    <view class="footer-button">
      <button
        style="background-image: linear-gradient(to right, #40ade3, #90cde7); border-radius: 40rpx"
      >
        下一步(3)
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import Parents from '@/pages/my/components/Profile/Parents.vue'
import { ref } from 'vue'

const education = ref<string[]>(['初中', '高中', '大专', '本科', '硕士', '博士'])
const money = ref<string[]>(['2-3千', '3-5千', '5-8千', '8千-1万', '1-2万', '2-5万', '5万以上'])
const marry = ref<string[]>(['随时', '半年内', '一年内', '两年内', '三年内'])

const educationValue = ref<string>()
const moneyValue = ref<string>()
const marryValue = ref<string>()

const changePickerEducation = (e: Event): void => {
  educationValue.value = education.value[e.detail.value]
}
const changePickerMoney = (e: Event): void => {
  moneyValue.value = money.value[e.detail.value]
}
const changePickerMarry = (e: Event): void => {
  marryValue.value = marry.value[e.detail.value]
}
</script>

<style scoped lang="scss">
.meta {
  width: 100%;
  height: 90vh;

  .station {
    height: 21%;
  }

  .footer-button {
    position: sticky;
    bottom: 2%;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;

    button {
      color: #fff;
    }
  }
}
</style>
